<template>
  <el-menu
    mode="vertical"
    text-color="#000"
    active-text-color="#409eff"
    class="el-menu-vertical-demo"
    unique-opened
  >
    <template v-for="item in items">
      <el-submenu
        v-if="item.children && item.role.some(irole => irole === userInfo.role)"
        :index="item.path"
        :key="item.path"
      >
        <template slot="title">
          <i :class="item.icon"></i>
          <span slot="title">{{ item.name }}</span>
        </template>
        <router-link
          v-for="(citem, cindex) in item.children"
          :to="citem.path"
          :key="cindex"
        >
          <el-menu-item
            :index="citem.path"
            v-if="citem.role.some(crole => crole === userInfo.role)"
          >
            <span slot="title">{{ citem.name }}</span>
          </el-menu-item>
        </router-link>
      </el-submenu>
    </template>
  </el-menu>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "leftmenu",
  data() {
    return {
      items: [
        {
          icon: "el-icon-user-solid",
          name: "用户管理",
          path: "/user",
          role: ["admin"],
          children: [{ path: "/user/list", name: "用户列表", role: ["admin"] }]
        },
        {
          icon: "el-icon-s-cooperation",
          name: "套餐管理",
          path: "/rental",
          role: ["admin"],
          children: [
            { path: "/order/list", name: "套餐列表", role: ["admin"] },
            { path: "/order/package", name: "套餐配置", role: ["admin"] }
          ]
        },
        {
          icon: "el-icon-s-order",
          name: "食物消费管理",
          path: "/Food",
          role: ["admin", "student"],
          children: [
            { path: "/Food/list", name: "送餐列表", role: ["admin"] },
            { path: "/Food/Food", name: "用户消费选择", role: ["student"] },
            { path: "/Food/cback", name: "用户确认收到", role: ["student"] },
            { path: "/Food/history", name: "历史消费订单", role: ["student"] }
          ]
        },

        {
          icon: "el-icon-s-shop",
          name: "商家信息",
          path: "/seller",
          role: ["admin", "student"],
          children: [
            { path: "/seller/list", name: "商户信息", role: ["admin"] },
            { path: "/seller/contact", name: "联系商家", role: ["student"] },
          ]
        },
        {
          icon: "el-icon-s-data",
          name: "数据统计",
          path: "/dsj",
          role: ["admin"],
          children: [
            {
              path: "/static/cusine",
              name: "数据统计图",
              role: ["admin"]
            }
          ]
        },
        // {
        //   icon: "el-icon-s-flag",
        //   name: "投资管理",
        //   path: "/invest",
        //   role: ["admin", "invest"],
        //   children: [
        //     {
        //       path: "/invest/list",
        //       name: "投资记录",
        //       role: ["admin"]
        //     },
        //     {
        //       path: "/invest/chuzi",
        //       name: "投资商投资",
        //       role: ["invest"]
        //     },
        //     {
        //       path: "/invest/history",
        //       name: "历史投资",
        //       role: ["invest"]
        //     }
        //   ]
        // },
        // {
        //   icon: "el-icon-s-data",
        //   name: "数据统计",
        //   path: "/dsj",
        //   role: ["admin"],
        //   children: [
        //     {
        //       path: "/invest/chuzi",
        //       name: "数据统计图",
        //       role: ["admin"]
        //     }
        //   ]
        // }
      ]
    };
  },
  mounted() {
    this.items.forEach(item => {
      const aaa = item.role.some(i => i === this.userInfo.role);
    });
  },
  computed: {
    ...mapGetters(["userInfo"])
  }
};
</script>
<style scoped>
.el-menu {
  border: none;
}
.fa-margin {
  margin-right: 5px;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 180px;
  min-height: 400px;
}
.el-menu-vertical-demo {
  width: 35px;
}
.el-submenu .el-menu-item {
  min-width: 180px;
}

.hiddenDropdown,
.hiddenDropname {
  display: none;
}
a {
  text-decoration: none;
}
</style>
